<template>
  <div class="title-box" :class="[`title-box-${size}`,{'border-bottom':borderBottom}]">
    <div>
      <span class="title-bar">{{title}}</span>
      <span v-if="errorMsg" class="error-text">{{errorMsg}}</span>
    </div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: {
    title: String,
    errorMsg: String,
    size: {
      type: String,
      default: 'default' //small large default
    },
    borderBottom: Boolean
  },
  data() {
    return {
    }
  },
  computed: {
  },
  created() {
  },
  methods: {
  },
}
</script>

<style lang="less" scoped>
.title-box {
  padding-bottom: 20px;
  line-height: 1;

  display: flex;
  justify-content: space-between;
  align-items: center;

  .title-bar {
    position: relative;
    color: #282828;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      background: @primary-color;
      transform: translateY(-50%);
    }
  }

  .error-text {
    margin-left: 10px;
    color: #f5222d;
  }

  &.title-box-small {
    .title-bar {
      padding-left: 18px;
      font-size: 18px;
      font-weight: 500;

      &::before {
        width: 3px;
        height: 16px;
      }
    }
  }

  &.title-box-default {
    .title-bar {
      padding-left: 21px;
      font-size: 20px;

      &::before {
        width: 3px;
        height: 18px;
      }
    }
  }

  &.title-box-large {
    .title-bar {
      padding-left: 22px;
      font-size: 22px;

      &::before {
        width: 5px;
        height: 21px;
      }
    }
  }

  &.border-bottom {
    position: relative;
    padding: 20px;

    &::after {
      content: '';
      position: absolute;
      left: 0px;
      right: 0px;
      bottom: 0;
      border-bottom: 1px solid #e8e8e8;
    }
  }
}
</style>
